<!doctype html>
<!--[if lte IE 8]>     <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width" />
  <meta name="description" content="Cascading grid layout library" />

  <title>Masonry FAQ</title>

  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Noto+Sans:400,700,400italic" />

  
    <!-- DEV MODE - including each .css file -->
    
      <link rel="stylesheet" href="bower_components/normalize-css/normalize.css" />
    
      <link rel="stylesheet" href="css/base.css" />
    
      <link rel="stylesheet" href="css/code.css" />
    
      <link rel="stylesheet" href="css/demos.css" />
    
      <link rel="stylesheet" href="css/footer.css" />
    
      <link rel="stylesheet" href="css/hero.css" />
    
      <link rel="stylesheet" href="css/icons.css" />
    
      <link rel="stylesheet" href="css/index.css" />
    
      <link rel="stylesheet" href="css/layout.css" />
    
      <link rel="stylesheet" href="css/modules.css" />
    
      <link rel="stylesheet" href="css/site-nav.css" />
    
  

  
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@desandro" />
  <meta name="twitter:url" content="http://masonry.desandro.com/faq.html" />
  <meta name="twitter:title" content="Masonry FAQ" />
  <meta name="twitter:description" content="Cascading grid layout library" />

  

</head>
<body class="faq-page" data-page="faq">

  <div id="site-nav">
    <div class="primary-content">
      <h1><a href=".">Masonry</a></h1>
      <ol>
        <li class="nav-options"><a href="options.html">Options</a></li>
        <li class="nav-methods"><a href="methods.html">Methods</a></li>
        <li class="nav-events"><a href="events.html">Events</a></li>
        <li class="nav-appendix"><a href="appendix.html">Appendix</a></li>
        <li class="nav-faq"><a href="faq.html">FAQ</a></li>
      </ol>
    </div>
  </div>

  
  

  <div id="content">

    <div class="primary-content">
      
        <h1>FAQ</h1>
        

      
      
        <ul id="page-nav">
          
            <li><a href="#overlapping">Overlapping</a></li>
          
            <li><a href="#browser-support">Browser support</a></li>
          
            <li><a href="#difference-between-isotope-and-masonry">Difference between Isotope and Masonry</a></li>
          
            <li><a href="#first-item-breaks-grid">First item breaks grid</a></li>
          
            <li><a href="#animate-item-width-or-height">Animate item width or height</a></li>
          
        </ul>
      
    </div>

    
    

<div class="primary-content">

  <h2 id="overlapping">How do I fix overlapping item elements?</h2>

  <p>If your layout has images, you probably need to use <a href="appendix.html#imagesloaded">imagesLoaded</a>.</p>

  <p>Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, <a href="appendix.html#web-fonts">web fonts</a>, embedded buttons. To fix it, you need to initialize or <a href="methods.html#layout"><code>layout</code></a> after all the items have their proper size.</p>

</div><div class="primary-content">

  <h2 id="browser-support">What is Masonry&rsquo;s browser support?</h2>

  <p>Masonry works in IE8+ and modern browsers, including mobile browsers on iOS and Android.</p>

</div><div class="primary-content">

  <h2 id="difference-between-isotope-and-masonry">What is the difference between Isotope and Masonry?</h2>

  <p>Masonry, <a href="http://isotope.metafizzy.co">Isotope</a>, and <a href="http://packery.metafizzy.co">Packery</a> are all similar in that they are layout libraries. Many of their options and methods are the same.</p>

  <p>Masonry does cascading grid "masonry" layouts. Packery does bin-packing layouts, which allow it to be used for <a href="">draggable interactions</a>.</p>

  <p>Isotope does sorting and filtering. Isotope uses masonry layouts, as well as other layouts. </p>

  <p>Masonry is licensed MIT and is freely available for use and distribution. Isotope and Packery have a proprietary license, where you can purchase a license for commercial projects, or use it freely for open-source projects.</p>

</div><div class="primary-content">

<h2 id="first-item-breaks-grid">The first item breaks the grid!</h2>

<p>You most likely need to set the <a href="options.html#columnwidth"><code>columnWidth</code> option</a>. Without <code>columnWidth</code> set, Masonry will use the width of the first item for the size of its columns.</p>

<pre><code class="js"><span class="keyword">var</span> msnry = <span class="keyword">new</span> Masonry( elem, {
  columnWidth: <span class="number">200</span>
});
<span class="comment">// or with jQuery</span>
$(<span class="string">'#container'</span>).masonry({
  columnWidth: <span class="number">200</span>
});</code></pre>



</div><div class="primary-content">

  <h2 id="animate-item-width-or-height">How do I animate the width or height of item elements?</h2>

  <p>You cannot transition or animate the size of an item element <em>and</em> properly lay out. But there is a trick &mdash; you can animate a child element of the item element.</p>

  <div class="row example">
    <div class="cell example-code">
<pre><code class="html"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"masonry"</span>&gt;</span>
  <span class="comment">&lt;!-- items have item-content children element --&gt;</span>
  <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"item"</span>&gt;</span>
    <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"item-content"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">div</span>&gt;</span>
  ...</code></pre>

<pre><code class="css"><span class="comment">/* item is invisible, but used for layout
item-content is visible, and transitions size */</span>
<span class="class">.animate-item-size-demo</span> <span class="class">.item</span>,
<span class="class">.animate-item-size-demo</span> <span class="class">.item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">60</span>px;</span></span>
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">60</span>px;</span></span>
<span class="rule">}</span></span>
<span class="class">.animate-item-size-demo</span> <span class="class">.item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#09D</span>;</span></span>
  <span class="rule"><span class="attribute">transition</span>:<span class="value"> width <span class="number">0.4</span>s, height <span class="number">0.4</span>s;</span></span>
  <span class="comment">/* -webkit-transition -moz, etc, too */</span>
<span class="rule">}</span></span>
<span class="comment">/* both item and item content change size */</span>
<span class="class">.animate-item-size-demo</span> <span class="class">.item</span><span class="class">.is-expanded</span>,
<span class="class">.animate-item-size-demo</span> <span class="class">.item</span><span class="class">.is-expanded</span> <span class="class">.item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">180</span>px;</span></span>
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">120</span>px;</span></span>
<span class="rule">}</span></span></code></pre>

    </div>
    <div id="animate-item-size" class="cell demo">
      <p class="instruction">Click to item to toggle size</p>
      <div class="masonry clickable animate-item-size-demo">
          <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>

      </div>
      <p class="edit"><a href="http://codepen.io/desandro/pen/ILbJy">Edit this example</a> or <a href="http://codepen.io/desandro/pen/daKBo">example with jQuery</a>  on CodePen</p>
    </div>
  </div>

  <p>This technique works on items with responsive, percentage widths. Although, it does require a bit more JS. <a href="http://codepen.io/desandro/pen/jGJKL">Check out the example on CodePen</a> to see how it&rsquo;s done.</p>

  <div class="row example">
    <div class="cell example-code">
<pre><code class="css"><span class="id">#animate-item-size-responsive</span> <span class="class">.item</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20</span>%;</span></span>
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">60</span>px;</span></span>
<span class="rule">}</span></span>

<span class="id">#animate-item-size-responsive</span> <span class="class">.item-content</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value">  <span class="number">100</span>%;</span></span>
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100</span>%;</span></span>
  <span class="rule"><span class="attribute">background</span>:<span class="value"> <span class="hexcolor">#09D</span>;</span></span>
  <span class="rule"><span class="attribute">-webkit-transition</span>:<span class="value"> width <span class="number">0.4</span>s, height <span class="number">0.4</span>s;</span></span>
     <span class="rule"><span class="attribute">-moz-transition</span>:<span class="value"> width <span class="number">0.4</span>s, height <span class="number">0.4</span>s;</span></span>
       <span class="rule"><span class="attribute">-o-transition</span>:<span class="value"> width <span class="number">0.4</span>s, height <span class="number">0.4</span>s;</span></span>
          <span class="rule"><span class="attribute">transition</span>:<span class="value"> width <span class="number">0.4</span>s, height <span class="number">0.4</span>s;</span></span>
<span class="rule">}</span></span>
<span class="comment">/* item has expanded size */</span>
<span class="id">#animate-item-size-responsive</span> <span class="class">.item</span><span class="class">.is-expanded</span> <span class="rules">{
  <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">60</span>%;</span></span>
  <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">120</span>px;</span></span>
<span class="rule">}</span></span></code></pre>

    </div>
    <div id="animate-item-size-responsive" class="cell demo">
      <p class="instruction">Click to item to toggle size</p>
      <div class="masonry clickable animate-item-size-demo">
        <div class="grid-sizer"></div>
          <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>

      </div>
      <p class="edit"><a href="http://codepen.io/desandro/pen/BnCqy">Edit this example</a> or <a href="http://codepen.io/desandro/pen/JFpIB"> the example with jQuery</a> on CodePen</p>
    </div>

  </div>

</div>

  </div>

  <div id="footer">
    <div class="primary-content">
      Masonry by <a href="http://desandro.com">David DeSandro</a>. Make something rad with it.
    </div>
  </div>

<!-- Masonry does NOT require jQuery.
     jQuery is only used to demonstrate Masonry as a jQuery plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="bower_components/jquery/jquery.min.js"><\/script>')</script>


  <!-- DEV MODE - including each .js file -->
  
    <script src="bower_components/classie/classie.js"></script>
  
    <script src="bower_components/eventie/eventie.js"></script>
  
    <script src="bower_components/doc-ready/doc-ready.js"></script>
  
    <script src="bower_components/get-style-property/get-style-property.js"></script>
  
    <script src="bower_components/eventEmitter/EventEmitter.js"></script>
  
    <script src="bower_components/imagesloaded/imagesloaded.js"></script>
  
    <script src="bower_components/get-size/get-size.js"></script>
  
    <script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
  
    <script src="bower_components/matches-selector/matches-selector.js"></script>
  
    <script src="bower_components/outlayer/item.js"></script>
  
    <script src="bower_components/outlayer/outlayer.js"></script>
  
    <script src="bower_components/masonry/masonry.js"></script>
  
    <script src="js/controller.js"></script>
  
    <script src="js/pages/events.js"></script>
  
    <script src="js/pages/faq.js"></script>
  
    <script src="js/pages/index.js"></script>
  
    <script src="js/pages/methods.js"></script>
  




</body>
</html>
